<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<image src="../../static/back.png" mode="aspectFill" @click="tapToBack('back')"></image>
			</view>
			<view class="title">累计佣金</view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		
		
		
		<!-- 身份信息 -->
		<view class="identity">
			<image src="https://imgs.ynz666.com/2025/05/15/NDI1NzI0YzdhYzMzZmRiOTJhYzIwYTllZGYwNjUwMDY=.png" mode="aspectFill" class="identity_img"></image>
			<view class="identity_box">
				<view class="top">
					<view class="top_left">
						<view class="name">
							获得总佣金(元)
						</view>
						<view class="price">
							{{distribution.totalCommission}}
						</view>
					</view>
					<view class="top_right">
						<view class="name">
							今日收益(元)
						</view>
						<view class="price">
							{{distribution.todayCommission}}
						</view>
					</view>
				</view>
				<view class="xhx"></view>
				<view class="cen">
					<view class="item">
						<view class="name">
							礼包收益(元)
						</view>
						<view class="price">
							{{distribution.todayGiftCommission}}
						</view>
						<view class="priceAll">
							总{{distribution.totalGiftCommission}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							售卡收益(元)
						</view>
						<view class="price">
							{{distribution.todaySaleCommission}}
						</view>
						<view class="priceAll">
							总{{distribution.totalSaleCommission}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							团购收益(元)
						</view>
						<view class="price">
							{{distribution.todayGroupCommission}}
						</view>
						<view class="priceAll">
							总{{distribution.totalGroupCommission}}
						</view>
					</view>
					<view class="item">
						<view class="name">
							电商收益(元)
						</view>
						<view class="price">
							{{distribution.todayEcommerceCommission}}
						</view>
						<view class="priceAll">
							总{{distribution.totalEcommerceCommission}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分类型 -->
		<view class="typeFun">
				 <view :class="navIndex==index?'item item_active':'item'" v-for="(item,index) in categorys" :key="index" @click="navClick(index,item.id)">{{item}}</view>
		</view>
		
		<view class="listFun">
			<view class="item" v-for="(item,index) in searchList" :key="index">
				<view class="item_box">
					<view class="dw_name">
						{{item.productName}}
					</view>
					<view class="item_left">
						<image :src="item.productMainImage[0]" mode="aspectFill" class="img"></image>
					</view>
					<view class="item_right">
						<view class="info_one">
							<view class="name">
								昵称：{{item.adminMemberNickname}}
							</view>
							<view class="commission">
								<view class="com_name">
									销售佣金：
								</view>
								<view class="com_price">
									{{item.num}}
								</view>
							</view>
						</view>
						<view class="info_two">
							<view class="order_price">
								订单金额：{{item.orderUseAmount}}
							</view>
							<view class="time">
								时间：{{item.createdAt}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	
		
		
		
		
		
		<!-- <customTabbar :curNav="2" :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView'></customTabbar> -->
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getSecKillList,
	} from '../../apis/index.js';
	import {
		apiPointSeuityList,apiOperationMemberCard,walletCredits,walletCommissionStat
	} from '../../apis/my.js';
	
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import loading from '../../components/loading/loading.vue';
	
	export default {
		data() {
			return {
				loading:true,
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				mineInfo:{},
				distribution:{},
				scrollFlag:false,
				latitude: 0,
				longitude: 0,
				
				purchaseList:[
					{
						img:'',
						name:'徐点点不滴',
					  shop:'一点点经典口味波霸奶绿大杯'
					},
					{
						img:'',
						name:'刘打打飞',
					  shop:'明星不错大大大一样'
					}
				],//购买人轮播信息
				
				currentBanner:0,
				currentplat:0,
				likeAllList:[],//会员免费列表
				
				navOneList:[],
				
				categorys:['总明细','售卡明细','礼包明细','团购明细'],
				navIndex:0,
				
				par:{
					page: 1,
					pageSize: 10,
					// type:0,
					bizType:2,//1、钱包（默认），2、佣金
					commissionType:0,//0-所有（默认），1-售卡，2-礼包，3-团购

				},
				searchList:[],
				isLastPage:false,
				
				commissionStatData:{}
			}
		},
		components: {
			customTabbar,
			loading
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onShow() {
			uni.hideTabBar();
			this.getUserInfo();
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			
		},
		onLoad(){
			this.latitude = app.globalData.latitude;
			this.longitude = app.globalData.longitude;
			
			this.walletCreditsList();
			this.walletCommissionData();
		},
		
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		methods: {
			walletCommissionData(){
				walletCommissionStat().then(res=>{
					this.distribution=res.data
				})
			},
			walletCreditsList(){
				let that = this;
				
				walletCredits(that.par).then(res=>{
					that.searchList = that.par.page == 1 ? res.data.List.map((item)=>{
						return Object.assign({}, item, {
							statusCode:that.transformCode(item.statusName),
						})
					}) : that.searchList.concat(res.data.List.map((item)=>{
						return Object.assign({}, item, {
							statusCode:that.transformCode(item.statusName),
						})
					}));
					that.isLastPage = res.data.lastPage;
					console.log(that.searchList,"that.searchList")
				})
			},
			transformCode(status){
				
					switch(status){
						case '处理中':
						return 1;
						break;
						case '打款中':
						return 2;
						break;
						case '审核中':
						return 3;
						break;
						case '审核通过':
						return 4;
						break;
						case '提现异常':
						return 5;
						break;
						case '提现成功':
						return 6;
						break;
						default:
						break;
					}
				
			},
			navClick(index,id){
				this.navIndex=index
				
				this.par.commissionType=index
				this.par.page = 1;
				this.isLastPage = false;
				this.walletCreditsList()
			},
			// 返回按钮
			tapToBack(page) {
				console.log(page,"111")
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					break;
				}
			},
			// 手机号授权
			onGetPhoneNumber(e){
				console.log(e,"eeeee")
				let that = this;
				app.GetMobile(e,function(e){
					
					that.getUserInfo();
					
				});
			},
			onGetPhoneNumberTwo(e){
				let that = this;
				app.GetMobile(e,function(e){
					
				
				});
			},
			
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					
					that.loading=false
					uni.setStorageSync('mineInfo', lRes);
				})
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
			
			// 跳转
			JumpPage(page) {
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '/pages/' + page + '/' + page
						})
						break;
					default:
						uni.navigateTo({
							url: `../${page}/${page}`
						})
						break;
				}
			},
			
		},
		onReachBottom() {
			if (!this.isLastPage) {
				console.log(11)
				this.par.page++;
				this.walletCreditsList();
			}
		},
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 622rpx;
		z-index: -1;
		// background: linear-gradient( #FFD3DB,#fff);
		background: linear-gradient( #FFD3DB,#f9f9f9);
		// background: radial-gradient( 43% 146% at 92% 8%, #FFD3DB 0%, rgba(255,244,243,0) 100%);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}


 
	
	
	.identity{
		margin: 28rpx 26rpx 0;
		height: 432rpx;
		position: relative;
		.identity_img{
			width: 100%;
			height: 100%;
			    border-radius: 10rpx;
		}
		.identity_box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			border-radius: 10rpx;
			.top{
				padding: 48rpx 48rpx 42rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.top_left{
					display: flex;
					flex-direction: column;
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #CECECE;
					}
					.price{
						font-weight: 500;
						font-size: 48rpx;
						color: #F1C284;
						padding-top: 4rpx;
					}
				}
				.top_right{
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #CECECE;
					}
					.price{
						font-weight: 500;
						font-size: 24rpx;
						color: #F1C284;
						padding-top: 4rpx;
					}
				}
			}
			.xhx{
				margin: 0 32rpx;
				height: 1rpx;
				background:#48506B;
			}
			.cen{
				padding: 28rpx 26rpx 0;
				display: flex;
				justify-content: space-between;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #B4B4B4;
					}
					.price{
						font-weight: 500;
						font-size: 40rpx;
						color: #F1C284;
						padding: 4rpx 0 8rpx;
					}
					.priceAll{
						font-weight: 400;
						font-size: 24rpx;
						color: #ADADAD;
					}
				}
			}
			
		}
	}
	
	.typeFun{
		padding: 28rpx 0 28rpx 32rpx;
		display: flex;
		display: -webkit-box;
		overflow-x: auto;
		.item{
			padding: 0 24rpx;
			height: 48rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #D8D8D8;
			font-weight: 400;
			font-size: 28rpx;
			color: #727272;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 28rpx;
		}
		.item_active{
			border: 2rpx solid #FF5F25;
			font-weight: bold;
			color: #FF5F25;
		}
	}
	
	.listFun{
		.item{
			width: 694rpx;
			height: 190rpx;
			background: #FFFFFF;
			margin: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.item_box{
				height: 100%;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				position: relative;
				.dw_name{
					position: absolute;
					right: 0;
					top: 0;
					padding: 0 16rpx;
					height: 34rpx;
					background: #DEA254;
					border-radius: 0rpx 0rpx 0rpx 20rpx;
					font-size: 24rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.item_left{
					width: 94rpx;
					height: 94rpx;
					.img{
						width: 94rpx;
						height: 94rpx;
					}
				}
				.item_right{
					padding-left: 54rpx;
					display: flex;
					flex-direction: column;
					flex: 1;
					.info_one{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.name{
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}
						.commission{
							display: flex;
							align-items: baseline;
							.com_name{
								font-weight: 400;
								font-size: 24rpx;
								color: #727272;
							}
							.com_price{
								font-weight: 500;
								font-size: 40rpx;
								color: #FF5F25;
							}
						}
					}
					.info_two{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 4rpx;
						.order_price{
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
						}
						.time{
							font-weight: 400;
							font-size: 22rpx;
							color: #727272;
						}
					}
				}
			}
		}
	}
	
	
	
	
	
	
	
	
	
}
</style>
